{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/game.css' %}">
{% endblock %}
{% block content %}
    <body>
        <div class="dialog-container">
            <div class="game-intro">
                <img src="{% static '/picture/monkey.jpg' %}" alt="游戏封面" class="game-cover">
                <div class="game-title">{{ read_game.name }}</div>
                <div class="game-developer">{{ read_game.author }}</div>
                <div class="game-ratings">
                    <!-- <h3>游戏评分</h3> -->
                    <p>评分：{{ read_game.score }}/10</p>
                </div>
{#                <div class="game-music">#}
{#                    <!-- <h3>游戏内音乐</h3> -->#}
{#                    <p>音乐名 - 作曲者</p>#}
{#                </div>#}
{#                <div class="theme-song">#}
{#                    <!-- <h3>主题歌</h3> -->#}
{#                    <p>主题歌：作曲者名</p>#}
{#                </div>#}
                   <div class="rating-container">
                    <label for="rating">自行打分:</label>
                    <input type="range" id="rating" name="rating" min="0" max="10" value="0" oninput="updateRating(this.value)">
                    <span id="rating-value">0</span>
                    <button class="btn-pingfen">确定</button>
                  </div>
            </div>

            <div class="game-container">
                <div class="game-details">
                    <div class="game-description">
                        <!-- <h3>游戏介绍</h3> -->
                        <p>{{ read_game.abstract }}</p>
                    </div>
                    <div class="game-categories">
                        <!-- <h3>游戏分类</h3> -->
                        <ul>
                            <li>动作冒险</li>
                            <li>角色扮演</li>
                            <li>开放世界</li>
                            <li>3A</li>
                            <!-- 更多分类标签 -->
                        </ul>
                    </div>
                    <div class="game-characters">
                        <h3>主要人物介绍</h3>
{#                        <p>孙悟空（Monkey King）：游戏的主角，被称为“天命之人”，#}
{#                            玩家将扮演这位具有传奇色彩的猴王，#}
{#                            使用他的如意金箍棒和七十二变等能力，#}
{#                            在西游的世界中进行冒险和战斗。#}
{#                        </p>#}


                    </div>
                </div>
            </div>

        </div>
        <div class="grid-container">
            <div class="post">
{#                <div class="comments">#}
{#                <h3>评论区</h3>#}
{#                <div class="comment-form">#}
{#                    <textarea id="formpl" placeholder="写下你的评论..."></textarea>#}
{#                    <button class="submit-comment" id="plBtn">提交评论</button>#}
{#                </div>#}
{#            </div>#}
{#                <div class="comment-section">#}
{#                <div class="comment">#}
{#                    <div class="comment-header">#}
{#                        <span class="user-name">{{ obj.user_id.name }}:</span>#}
{#                        <span class="comment-text">{{ obj.content }}</span>#}
{#                    </div>#}
{#                    <div class="comment-body">#}
{#                        <!-- <p></p> 或者 <p>这个好厉害</p> -->#}
{#                    </div>#}
{#                </div>#}
{#                        <div class="reply user-c">#}
{#                            <div class="reply-text">#}
{#                                <div class="reply-header">#}
{#                                    <span class="user-name">{{ li.0 }}:{{ li.1 }}：</span>#}
{#                                </div>#}
{#                                <div class="reply-body">#}
{#                                    <p>{{ li.2 }}</p>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                </div>#}
    </div>
            </div>

{% endblock %}
{% block js %}
    <script src="{% static '/js/jquery-3.6.0.min.js' %}"></script>
    <script>
        function updateRating(value) {
          document.getElementById('rating-value').textContent = value;
        }
        $(function () {
            bindBtnEvent();
        })
        function bindBtnEvent() {
          $(".btn-pingfen").click(function () {
          var ratingValue = document.getElementById('rating').value;
          $.ajax({
                url: "/game/score/",  //    => /order/delete/?uid=123
                type: "GET",
                data: {
                    score: ratingValue,
                    uid: {{ read_game.id }},
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        alert('您的评分是：' + ratingValue + '/10');
                    }else {
                        alert(res.error);
                    }
                }
                })
          });
        }

      </script>
{% endblock %}